import Head from 'next/head'
import { Row, Col, Spin, List, Affix } from 'antd'
import React, { useState } from 'react'
import axios from 'axios'
import Link from 'next/link'
import servicePath from '../config/apiUrl'
import Author from '../components/Author'
import Footer from '../components/Footer'
import Index from '../components/Index'
import { CalendarOutlined, FolderOpenOutlined} from '@ant-design/icons'

const Home = (list) => {
  const [mylist, setMylist] = useState(list.data)

  return (
    <div>
      <Head>
        <title>首页 | a_liao的博客</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <Index />
      <Row className="comm-main" type="flex" justify="center">
        <Col className="comm-left" xs={24} sm={24} md={16} lg={18} xl={14}  >
          <List
            itemLayout="vertical"
            dataSource={mylist}
            renderItem={item => (
              <List.Item>
                <div className="list-title">
                  <Link href={{ pathname: '/detailed', query: { id: item.id } }}>
                    <a><b>{item.title}</b></a>
                  </Link>
                </div>
                <div className="list-icon">
                  <span><CalendarOutlined />{item.addTime}</span>
                  <span><FolderOpenOutlined />{item.typeName}</span>
                </div>
                <div className="list-context" >
                    <Link href={{ pathname: '/detailed', query: { id: item.id } }} >
                      <div>{item.introduce}</div>
                    </Link>
                </div>
              </List.Item>
            )}
          />
        </Col>
        <Col className="comm-right" xs={0} sm={0} md={7} lg={5} xl={4}>
          <Author />
        </Col>
      </Row>
      <Footer />
      <style>{`
      .comm-left{
        background-color: #FFF;
        padding:.3rem;
        border-radius: .3rem;
        border:1px solid #eee;
      }
      .comm-right{
        background-color: #FFF;
        margin-left: .5rem;
        padding:.3rem;
        border-radius: .3rem;
        border-bottom:1px solid #eee;
        }
      .comm-box{
        background-color: #FFF;
        margin-left: .5rem;
        padding:.3rem;
        border-radius: .3rem;
        border:1px solid #eee;
      }
      .comm-main{
        margin-top: .5rem;
      }
      .list-title a{
        font-size:1.3rem;
        color: #404040;
        padding: 0 0.5rem;
      }
      .list-context{
          color:#a3a3a3;
          padding:.5rem;
      }
      .list-icon{
          padding:.5rem 0;
          color:#AAA;
      }
      .list-icon span{
          display: inline-block;
          padding: 0 10px;
      }
      code {
        display: inline-block ;
        background-color:#fff5f5;
        border-radius:3px;
        padding-left: 5px;
        padding-right: 5px;
        color:#ff502c;
        margin: 0px 3px;
        line-height: 1.1rem;
        font-size: .87rem;
      }
      .list-go{
        text-align: right;
      }
    `}</style>
    </div>
  )
}

Home.getInitialProps = async () => {
  const promise = new Promise((resolve) => {
    axios(servicePath.getArticleList).then(
      (res) => {
        resolve(res.data)
      }
    )
  })

  return await promise
}

export default Home